<template>
    <div class="app-container">
        <!-- <el-tabs v-model="query.approveFlag" type="card" @tab-click="getApproveFlagData()">
            <el-tab-pane label="通过列表" name="1">
                <div class="handle">
                    <el-button type="primary" >送审</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="驳回列表" name="2"></el-tab-pane>
            <el-tab-pane label="未知列表" name="0">

            </el-tab-pane>
        </el-tabs> -->
        <!-- <div class="search"> -->
            <!-- <span>审核状态：</span>
            <el-select v-model="query.approveFlag" @change="getApproveFlagData()" placeholder="请选择">
                <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select> -->
        <div class="handle">
            <!-- <el-button type="primary" >通过</el-button>
            <el-button type="danger" >驳回</el-button> -->
            <!-- <el-button type="primary" @click="dialogVisible=true" >显示弹窗</el-button> -->
        </div>
        <el-table
            ref="multipleTable"
            :data="spotData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
           <el-table-column
            prop="smc"
            label="省"
            width="120">
            </el-table-column>
            <el-table-column
            prop="dsmc"
            label="市"
            width="120">
            </el-table-column>
            <el-table-column
            prop="qxmc"
            label="县"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="tbbh"
            label="图斑编号"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="zxjd"
            label="中心经度"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="zxwd"
            label="中心纬度"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="tbtymj"
            label="图斑面积"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="bigclassId"
            label="图斑大类"
            show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.bigclassId == 1">历史遗留矿山</span>
                    <span v-if="scope.row.bigclassId == 2">有责任主体的废弃矿山</span>
                    <span v-if="scope.row.bigclassId == 3">其他情形</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="tbtymj"
            label="状态"
            show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.approveFlag === 0">一上</el-tag>
                    <el-tag type="success" v-if="scope.row.approveFlag === 1">二上</el-tag>
                    <el-tag type="danger" v-if="scope.row.approveFlag === 2">三上</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="query.pageNum"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 弹窗测试 -->
        <el-dialog
            v-el-drag-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {getSpotPage} from '@/api/spot/spot.js'
export default {
    name: "PublicShow",
    data(){
        return {
            dialogVisible: false, // 弹窗
            spotData:[],
            tableData:[],
            total: '',
            multipleSelection: [],
            bigclass : {
                1: "历史遗留矿山",
                2: "有责任主体的废弃矿山",
                3: "其他情形"
            },
            states: [{
                value: 0,
                label: '待审'
                }, {
                value: 1,
                label: '归档'
                }, {
                value: 2,
                label: '驳回'
                }
            ],
            state: '',
            query: {
                pageSize: 10,
                pageNum: 1,
                approveFlag: '',
            }
        }
    },
    methods: {
        // 弹窗
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        // 获取spot数据
        getData(){
            getSpotPage(this.query).then(res => {
                console.log(res);
                this.spotData = res.data.data;
                this.total = res.data.count;
            })
        },
        // 获取 ApproveFlagData改变数据
        getApproveFlagData(){
            this.query.pageNum = 1;
            this.getData();
        },
         toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        // 根据状态选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页,每页条数变化
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getData();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.query.pageNum = val;
            this.getData();
            console.log(`当前页: ${val}`);
        }
    },
    created() {
        this.getData()
    },
}
</script>

<style scoped>
.search{
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}
.submit{
    position: absolute;
    right: 80px;
}
.handle{
    right: 80px;
    margin: 5px 0 20px;
    display: flex;
    justify-content: center;
}
</style>
